<template>
    <div class="category">
        <header class="category-header wrap van-hairline--bottom">
            <i class="icon-left" @click="goBack"><van-icon name="arrow-left" /></i>
            <div class="header-search"></div>
        </header>
        <Navbar/>
        <div class="search-wrap" ref="searchWrap">
            <ListScroll :scrollData="state.categoryData" class="nav-side-wrapper">
                <ul class="nav-side">
                    <li 
                    v-for="item in state.categoryData" 
                    :key="item.categoryId" 
                    v-text="item.categoryName"
                    :class="{'active' : state.currenIndex == item.categoryId}"
                    @click="selectMenu(item.categoryId)"
                    >
                    </li>
                </ul>
            </ListScroll>
            <div class="search-content">
                <ListScroll :scrollData="state.categoryData">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <template v-for="(category,index) in state.categoryData" :key="index">
                                <div class="swiper-slide" v-if="state.currenIndex == category.categoryId">
                                    <div class="category-list" v-for="(product,index) in category.secondLevelCategoryVOS" :key="index">
                                        <p class="category-title">{{ product.categoryName }}</p>
                                        <div class="product-item" v-for="(p,index) in product.thirdLevelCategoryVOS" :key="index" @click="toList(p)">
                                            <i class="product-img"><van-icon name="star-o" /></i>
                                            <p v-text="p.categoryName" class="product-title"></p>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </ListScroll>
            </div>
        </div>
    </div>
</template>

<script setup>
import Navbar from '@/components/Navbar.vue'
import ListScroll from '../components/ListScroll.vue';
import axios from 'axios'
import { onMounted, reactive ,ref} from 'vue';
import {useRouter} from 'vue-router'

const searchWrap = ref(null)
const router = useRouter()
const state = reactive({
    categoryData:[],
    currenIndex:15
})
onMounted(async ()=>{
    let $screenHeight = document.documentElement.clientHeight
    searchWrap.value.style.height = $screenHeight - 140 + 'px'
    // axios.get('http://127.0.0.1:8080/src/assets/categories.json').then(res=>{
    //     console.log(res);
    //     state.categoryData = res.data.data
    // })
    const { data } = await axios.get('http://127.0.0.1:8080/src/assets/categories.json')
    state.categoryData = data

})
const goBack = ()=>{
    router.push({path:'home'})
}
const selectMenu = (index)=>{
    state.currenIndex = index
}
const toList =()=>{

}
</script>


<style lang="less" scoped>
  @import '../common/style/mixin';
  .category {
    .category-header {
      background: #fff;
      position: fixed;
      left: 0;
      top: 0;
      .fj();
      .wh(100%, 50px);
      line-height: 50px;
      padding: 0 15px;
      box-sizing: border-box;
      font-size: 15px;
      color: #656771;
      z-index: 10000;
      &.active {
        background: @primary;
      }
      .icon-left {
        font-size: 25px;
        font-weight: bold;
      }
      .header-search {
        display: flex;
        width: 80%;
        height: 20px;
        line-height: 20px;
        margin: 10px 0;
        padding: 5px 0;
        color: #232326;
        background: #F7F7F7;
        border-radius: 20px;
        .nbSearch {
          padding: 0 10px 0 20px;
          font-size: 17px;
        }
        .search-title {
          font-size: 12px;
          color: #666;
          line-height: 21px;
        }
      }
      .icon-More {
        font-size: 20px;
      }
    }
  }
  .search-wrap {
    .fj();
    width: 100%;
    margin-top: 50px;
    background: #F8F8F8;
    height: 100%;
    .nav-side-wrapper {
      width: 28%;
      height: 100%;
      overflow: hidden;
      .nav-side {
        width: 100%;
        .boxSizing();
        background: #F8F8F8;
        li {
          width: 100%;
          height: 56px;
          text-align: center;
          line-height: 56px;
          font-size: 14px;
          &.active {
            color: @primary;
            background: #fff;
          }
        }
      }
    }
    .search-content {
      width: 72%;
      height: 100%;
      padding: 0 10px;
      background: #fff;
      overflow-y: scroll;
      touch-action: pan-y;
      * {
          touch-action: pan-y;
        }
      .boxSizing();
      .swiper-container {
        width: 100%;
        .swiper-slide {
          width: 100%;
          .category-main-img {
            width: 100%;
          }
          .category-list {
            display: flex;
            flex-wrap: wrap;
            flex-shrink: 0;
            width: 100%;
            .catogory-title {
              width: 100%;
              font-size: 17px;
              font-weight: 500;
              padding: 20px 0;
            }
            .product-item {
              width: 33.3333%;
              margin-bottom: 10px;
              text-align: center;
              font-size: 15px;
              .product-img {
                .wh(30px, 30px);
              }
            }
          }
        }
      }
    }
  }
  .fade-out-enter-active, .fade-out-leave-active {
    // transition: opacity 0.5s;
  }

  .fade-out-enter, .fade-out-leave-to {
    // opacity: 0;
  }
</style>